<template>
  <div>
    <el-header>
        <div class="left">
          <i class="el-icon-s-fold" @click="seeNav(isclose)"></i>
          <slot name='mianbaoxie'></slot>
        </div>
        <div class="right">
          <i class="el-icon-search padd_10" @click="see(isee)"></i>
          <transition name='transion'>
            <el-input v-model="input" placeholder="请输入内容" v-show="isee"></el-input>
          </transition>
          <el-dropdown>
            <span class="el-dropdown-link flex">
                <img src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80" alt="" class="wid_40">
                <i class="el-icon-arrow-down el-icon--right alin"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item disabled>双皮奶</el-dropdown-item>
              <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
  </div>
</template>

<script>
import Bus from '_utils/eventbus'
export default {
  data () {
    return {
      isee: false,
      isclose: false,
      input: ''

    }
  },
  methods: {
    seeNav (value) {
      this.isclose = !value
      Bus.$emit('close', !value)
    },
    see (value) {
      this.isee = !value
    }
  }
}
</script>

<style lang="scss" scoped>
.widt{
  height: 100vh;
  // background-color: pink;
}
.flex{
  display: flex;
}
.padd_10{
  padding-right: 10px;
}
.wid_40{
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.trans{
  color: transparent;
}
.transion{
  transition:  all 1s;
}
.el-menu{
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.el-main{
  padding: 0;
  .el-header{
    padding: 8px;
    display: flex;
    background-color: rgb(221, 213, 215);
    justify-content: space-between;
    align-items: center;
    .left{
      display: flex;
      align-items: center;
    }
    .right{
      display: flex;
      align-items: center;
      /deep/.el-input__inner{
        background:none;
        outline:none;
        border:none;
        border-bottom: 1px solid #CCC;
        img{
          width: 40px;
          height: 40px;
        }
      }
      .el-dropdown-link {
        cursor: pointer;
        color: #18191a;
      }
      .el-icon-arrow-down {
        font-size: 16px;
        font-weight: 700;
        align-self: flex-end;
      }
    }
  }
}
</style>
